<template>
	<view class="appraisal">
		<view class="appraisal-plate-1">
			<u-swiper :list="list" height="412" name="img"></u-swiper>
		</view>
		<view class="appraisal-plate-2">
			<view class="item">
				累计鉴定
				<text>{{jdNum}}</text>
				件
			</view>
			<view class="geduan">
				
			</view>
			<view class="item">
				累计客户
				<text>{{pelNum}}</text>
				人
			</view>
		</view>
		<view class="appraisal-plate-3">
			<view class="item" v-for="(item,index) in tagData" :key="index">
				<u-icon name="checkmark-circle" color="#D1AA56" size="25"></u-icon>
				<text>{{item.info}}</text>
			</view>
		</view>
		<view class="appraisal-plate-4"  v-if="is_token == true">
				<view class="item" @click="goIM">
					<text>在线鉴定</text>
					<image :src="imgUrl_1" mode=""></image>
				</view>
			<navigator url="imgSee/imgSee" open-type="navigate" hover-class="none">
				<view class="item">
					<text>图片鉴定</text>
					<image :src="imgUrl_2" mode=""></image>
				</view>
			</navigator>
			<navigator url="demand/demand" open-type="navigate" hover-class="none">
				<view class="item">
					<text>证书查询</text>
					<image :src="imgUrl_3" mode=""></image>
				</view>
			</navigator>
			<navigator url="technical/technical" open-type="navigate" hover-class="none">
				<view class="item">
					<text>鉴定妙招</text>
					<image :src="imgUrl_4" mode=""></image>
				</view>
			</navigator>
		</view>
		<view class="appraisal-plate-4" v-else @click="goLogin">
				<view class="item">
					<text>在线鉴定</text>
					<image :src="imgUrl_1" mode=""></image>
				</view>
				<view class="item">
					<text>图片鉴定</text>
					<image :src="imgUrl_2" mode=""></image>
				</view>
				<view class="item">
					<text>证书查询</text>
					<image :src="imgUrl_3" mode=""></image>
				</view>
				<view class="item">
					<text>鉴定妙招</text>
					<image :src="imgUrl_4" mode=""></image>
				</view>
		</view>
		<view class="appraisal-plate-5" v-if="is_token == true">
			<image :src="imgUrl_z" mode="widthFix"></image>
			<view class="geduan">
			</view>
			<navigator url="report/report" open-type="navigate" hover-class="none">
				<view class="plate-right">
					<view class="txt">
						<text>两位鉴定师细节初审</text>
						<text>首席鉴定师复核出具鉴定报告</text>
					</view>
					<!-- <image src="../../static/ic_ento.png" mode="widthFix"></image> -->
				</view>
			</navigator>
		</view>
		<view class="appraisal-plate-5" v-else @click="goLogin">
			<image :src="imgUrl_z" mode="widthFix"></image>
			<view class="geduan">
			</view>
				<view class="plate-right">
					<view class="txt">
						<text>两位鉴定师细节初审</text>
						<text>首席鉴定师复核出具鉴定报告</text>
					</view>
					<!-- <image src="../../static/ic_ento.png" mode="widthFix"></image> -->
				</view>
		</view>
		<view class="appraisal-plate-6">
			<view class="item" v-for="(i,index) in report" :key="index">
				<image :src="i.head_pic" mode="widthFix"></image>
				<view class="right-data">
					<view class="right-data-top">
						<text>{{i.nickname}}</text>
						<text>{{i.authen_time}}</text>
					</view>
					<view class="right-data-bottom">
						{{i.description}}
					</view>
				</view>
			</view>
		</view>
		<view class="appraisal-plate-7">
			<text>鉴定社区</text>
		</view>
		<view class="appraisal-plate-8">
			<view class="item" v-for="(i,index) in liuYanData" :key="index">
				<image :src="i.head_pic" class="touxiang"></image>
				<view class="center">
					<text>{{i.nickname}}</text>
					<text>{{i.description}}</text>
					<view class="imgArr">
						<image :src="item" mode=""  v-for="(item,num) in i.authen_pic" :key="num" @click="onYuLan(index)"></image>
					</view>
					<text>{{i.authen_time}}</text>
				</view>
				<view class="right-tag">
					{{i.category_name}}
				</view>
				<image src="../../static/zhang.png" mode="widthFix" class="zhang" v-if="i.authen_type == 3"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import IM from '@/static/js/IM.js'
	export default {
		data() {
			return {
				list:[],
				tagData:[],
				report:[],
				liuYanData:[],
				imgUrl_1:this.$Url + '/public/images/jianding/jianding1.png',
				imgUrl_2:this.$Url + '/public/images/jianding/jianding2.png',
				imgUrl_3:this.$Url + '/public/images/jianding/jianding3.png',
				imgUrl_4:this.$Url + '/public/images/jianding/jianding4.png',
				page:1,
				imgUrl_z:this.$Url + '/public/upload/au_pic/ic_identify_report.png',
				tim: '',
				service_data:'',
				pelNum:'',
				jdNum:'',
				is_token:false
			}
		},
		onShow() {
			this.getNumData()
			this.getPelNumData()
			IM.onMessage()
			IM.onTab()
			let go_login = uni.getStorageSync('go_login')
			if (go_login == 1) {
				this.is_token = false
			} else{
				this.is_token = true
				this.getHomeServiceId()
			}
		},
		created() {
			this.getBanner()
			this.getTag()
			this.getJianDingList()
			this.getLiuYan()
			this.getHomeServiceId()
		},
		onReachBottom() {
			this.page ++
			this.getLiuYan()
		},
		methods: {
			// 去登陆
			goLogin(){
				uni.showModal({
					content:'宝贝都为珍惜孤品，为了保障您的购买体验和资金安全，系统需要您的授权，所有的信息都会保密',
					confirmText:'去授权',
					confirmColor:'#D1AA56',
					success: (res) => {
						if (res.confirm) {
							uni.setStorageSync('go_login',1)
							uni.switchTab({
								url:'../mine/mine'
							})
						}
					}
				})
			},
			//请求鉴定数
			getNumData(){
				uni.request({
					url:this.$Url +'/index.php/app/Authentication/authenNum',
					method:'POST',
					data:{
						type:2
					},
					header:{
						"token":uni.getStorageSync('token')
					},
					success: (res) => {
					   this.jdNum = res.data.data
					}
				})
			},
			//累计客户数量
			getPelNumData(){
				uni.request({
					url:this.$Url +'/index.php/app/Authentication/authenNum',
					method:'POST',
					data:{
						type:3
					},
					header:{
						"token":uni.getStorageSync('token')
					},
					success: (res) => {
					   this.pelNum = res.data.data
					}
				})
			},
			// 前往客服页面
			goIM(){
				uni.navigateTo({
					url:'../common/IM/IM?id=' + this.service_account
				})
			},
			// 请求首页客服ID
			getHomeServiceId(){
				uni.request({
				    url:'https://fei.feicuikuang.com/index.php/app/Authentication/serverCommentMes',
				    method:'POST',
				    data:{
				       service_id:170
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.service_account = res.data.data.im_account
							this.service_data = res.data.data
							uni.setStorageSync('service_data',res.data.data)
						}else if(res.data.status == 100){
							this.is_token = false
						}
				    }
				})
			},
			//请求banner
			getBanner(){
				uni.request({
				    url:this.$Url +'/index.php/app/Banner/bannerList',
				    method:'POST',
				    data:{
						banner_type:5
				    },
					header:{
						"token":uni.getStorageSync('token')
					},
				    success: (res) => {
				       this.list = res.data.data
				    }
				})
			},
			//请求tag标签
			getTag(){
				uni.request({
				    url:this.$Url +'/index.php/app/Banner/authentication',
				    method:'POST',
				    data:{
				    },
					header:{
						"token":uni.getStorageSync('token')
					},
				    success: (res) => {
				       this.tagData = res.data.data
				    }
				})
			},
			//请求线上鉴定信息列表
			getJianDingList(){
				uni.request({
				    url:this.$Url +'/index.php/app/Authentication/authenReportList',
				    method:'POST',
				    data:{
						authen_channel:3,
						p:1
				    },
				    header:{
				    	"token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       this.report = res.data.data.report
				    }
				})
			},
			//获取鉴定列表
			getLiuYan(){
				uni.request({
				    url:this.$Url +'/index.php/app/Authentication/authenReportList',
				    method:'POST',
				    data:{
				       authen_channel:1,
					   p:this.page
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       this.liuYanData = this.liuYanData.concat(res.data.data.report)
				    }
				})
			},
			//预览图片
			onYuLan(index){
				uni.previewImage({
					urls:this.liuYanData[index].authen_pic,
					indicator:"number"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.appraisal{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	.appraisal-plate-2{
		width: 100vw;
		height: 82upx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		.item{
			color: #333;
			font-size: 28upx;
			text{
				color: #d9b664;
				font-weight: 600;
			}
		}
		.geduan{
			width: 4upx;
			height: 25upx;
			background-color: #333;
			margin: 0 20upx;
		}
	}
	.appraisal-plate-3{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 45upx;
		height: 80upx;
		.item{
			display: flex;
			align-items: center;
			image{
				width: 25upx;
				margin-right: 15upx;
			}
			text{
				font-size: 28upx;
				color: #333;
			}
		}
	}
	.appraisal-plate-4{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20upx;
		.item{
			width: 344upx;
			height: 202upx;
			box-shadow: 0px 0upx 5upx 6upx rgba(0,0,0,0.2);
			border-radius: 30upx;
			position: relative;
			margin-bottom: 20upx;
			image{
				width: 344upx;
				height: 202upx;
				border-radius: 30upx;
			}
			text{
				position: absolute;
				color: #fff;
				font-weight: 600;
				font-size: 30upx;
				z-index: 100;
				top: 38upx;
				left: 30upx;
			}
		}
	}
	.appraisal-plate-5{
		display: flex;
		align-items: center;
		width: 710upx;
		height: 122upx;
		background-color: #fff;
		border-radius: 40upx;
		margin: 0 auto;
		>image{
			width: 88upx;
			height: 88upx;
			margin-left: 25upx;
		}
		.geduan{
			width: 2upx;
			height: 82upx;
			background-color: #bcbcbc;
			margin: 0 25upx;
		}
		.plate-right{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 520upx;
			.txt{
				display: flex;
				flex-direction: column;
				text{
					font-size: 25upx;
					color: #333;
					margin-bottom: 10upx;
				}
			}
			image{
				width: 20upx;
			}
		}
	}
	.appraisal-plate-6{
		width: 100vw;
		max-height: 575upx;
		background-color: #fff;
		overflow: scroll;
		margin-top: 20upx;
		.item{
			display: flex;
			align-items: center;
			margin-top: 35upx;
			margin-left: 30upx;
			image{
				width: 85upx;
				height: 85upx;
				border-radius: 50%;
				margin-right: 30upx;
			}
			.right-data{
				width: 580upx;
				display: flex;
				flex-direction: column;
				.right-data-top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					text:first-child{
						font-size: 22upx;
						color: #666666;
					}
					text:last-child{
						color: #bdbdbd;
						font-size: 19upx;
					}
				}
				.right-data-bottom{
					font-size: 26upx;
					color: #333;
				}
			}
		}
	}
	.appraisal-plate-7{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 114upx;
		width: 100vw;
		text{
			color: #333;
			font-size: 35upx;
			font-weight: 600;
		}
	}
	.appraisal-plate-8{
		.item{
			width: 100vw;
			background-color: #fff;
			padding-top: 30upx;
			padding-bottom: 30upx;
			display: flex;
			margin-bottom: 20upx;
			position: relative;
			.zhang{
				position: absolute;
				bottom: 33upx;
				right: 40upx;
				z-index: 100;
				width: 214upx;
				height: 168upx;
			}
			.touxiang{
				width: 96upx;
				height: 96upx;
				border-radius: 50%;
				margin-right: 20upx;
				margin-left: 28upx;
			}
			.center{
				width: 445upx;
				display: flex;
				flex-direction: column;
				text:first-child{
					font-size: 24upx;
					color: #999;
				}
				text:nth-child(2){
					font-size: 28upx;
					color: #333;
				}
				text:last-child{
					font-size: 24upx;
					color: #999;
				}
				.imgArr{
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 20upx;
					width: 420upx;
					image{
						width: 120upx;
						height: 150upx;
						margin-right: 20upx;
						margin-bottom: 20upx;
					}
				}
			}
			.right-tag{
				width: 128upx;
				height: 42upx;
				color: #444;
				background-color: #d5d5d5;
				border-radius: 40upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>
